﻿@using App.Web.Utility
@{
    ViewBag.Title = Html.GetPageTitle("Home");
    Layout = null;
    App.Web.ViewModels.UtilityModels.PagerConfig _PagerConfig = ViewBag.PagerConfig as App.Web.ViewModels.UtilityModels.PagerConfig;
}
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/960.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/DesignerStyles.css")" rel="stylesheet" type="text/css" />
    @*<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />*@
    <link href="@Url.Content("~/Content/themes/bdmarket-jtheme/jquery.ui.all.css")" rel="Stylesheet" type="text/css" />
    @if (ConfigReader.IsProductionDeployment)
    {
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    }
    else
    {
        @Html.JavaScript("jquery-1.5.1.min.js", Url)
    }
    <style type="text/css">
    .home-page-slider {
        position: relative;
        height: 350px;
        z-index: -1;
    }
    .home-page-slider img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 8;
        opacity: 0.0;
    }
    .home-page-slider img.active {
        z-index: 10;
        opacity: 1.0;
    }
    .home-page-slider img.last-active {
        z-index: 9;
    }
    .home-page-slider img {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;
        /* Set up proportionate scaling */
        width: 100%;
        /*height: 665px;*/
        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
    }
    .home-page-footer
    {        
        overflow: hidden;        
        color: #ffffff;
        text-align: center;               
        height: 35px;
        width: 100%;
        display: block;
        margin-top: 20px;
        position: fixed;
        bottom: 20px;
    }    
    .home-page-body{margin-top:50px;}
    .home-page-body span{color:#FFFFFF; font-size:25px; font-weight:bold; text-shadow: 1px 2px 2px #333333;}     
    .search-box{padding:5px; height:40px; width:493px; margin:0px auto;}
    .search-box input{height:40px; width:391px; float:left; font-size:18px; color:#7b7b7b; font-weight:normal; padding:0px; padding-left:15px; margin:0px; border:none;background: rgb(90, 78, 80);background: rgba(255, 255, 255, 0.88)}
    .search-box #btnSearch{height:40px; width:96px; float:left; margin-left:5px; background-color:#e45626; cursor:pointer;}  
    .search-box #btnSearch img{margin:13px 0px 0px 40px;}
    .span-compare{color:#ffffff;}
    </style>
    <script language="javascript" type="text/javascript">
        function SlideSwitch() {
            var $active = $('.home-page-slider img.active');
            if ($active.length == 0) $active = $('.home-page-slider img:last');
            var $next = $active.next().length ? $active.next() : $('.home-page-slider img:first');
            $active.addClass('last-active');
            $next.css({ opacity: 0.0 })
                .addClass('active')
                .animate({ opacity: 1.0 }, 2000, function () {
                    $active.removeClass('active last-active');
                });
        }
        var BASE_URI = "/UploadedImages/HomePageSliders/";
        function GetImageUriPrefix() {
            var uriPrefix = BASE_URI;
            var screenWidth = screen.width;
            var screenHeight = screen.height;
            var aspectRatio = screenWidth / screenHeight;
            if (aspectRatio == (4 / 3)) {
                return uriPrefix + '4_3/';
            }
            else {
                if (screenWidth > 1920)
                    return uriPrefix + '16_9/2880/';
                else if (screenWidth > 1600)
                    return uriPrefix + '16_9/1920/';
                else if (screenWidth > 1440)
                    return uriPrefix + '16_9/1600/';
                else
                    return uriPrefix + '16_9/1440/';
            }
        }
        var LOADED_IMAGES = 0;
        function InitSliders() {
            var uriPrefix = GetImageUriPrefix();
            var images = ['imac.jpg', 'jacket.jpg', 'chair.jpg', 'cookies.jpg', 'juta.jpg'];
            ///PreLoad and Wait for all image loading except the first one
            for (var i = 0; i < images.length; i++) {
                var src = uriPrefix + images[i];
                var imgClass = i == 0 ? 'active' : '';
                var img = $('<img />', { 'alt': '', 'class': imgClass }).appendTo('#divSliderContainer');
                $(img).one('load', function () {
                    LOADED_IMAGES++;
                    if (LOADED_IMAGES == images.length)
                        setInterval("SlideSwitch()", 5000);
                })
                .attr('src', src)
                .each(function () {
                    if (this.complete) $(this).trigger('load');
                });
            }
        }        
        $(document).ready(function () {
            InitSliders();
        });
    </script>
</head>
<body>       
    <div id="wrapper">
        <div id="header" class="container_16 clearfix">
            @Html.Partial("_Header")
        </div>
        <div class="home-page-body">
            <div style="margin:0px auto; text-align:center; margin-bottom:15px;"><span>Discover Millions of daily need products</span></div>
            <div class="search-box transparent-search-back">
                @using (Html.BeginForm("search", "product", FormMethod.Post, new { id = "frmSearch" }))
                {
                <input type="text" id="txtKeyword" name="keyword" value="I'm looking for..." onfocus="if (this.value == 'I\'m looking for...') this.value = '';" onblur="if (this.value.trim() == '') this.value = 'I\'m looking for...';"/><div id="btnSearch" onclick="javascript:SubmitSearchForm();"><img src="/Content/Images/search_icon.png" alt="Search" title="Search" /></div>
                }
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div class="home-page-footer transparent-search-back white-link">
        <div class="text-shadow" style="margin-top:10px;">
            <a href="/">Home</a> | <a href="/contact-us">Contact</a> | <a href="/feedback">Feedback</a> | <a href="/privacy-policy">Privacy Policy</a> | <a href="/terms-and-conditions">Terms & Conditions</a> | <a href="/company/list">Featured Companies</a>
        </div>
    </div>
    <div id="divSliderContainer" class="home-page-slider"></div>
    @Html.JavaScript("jquery-ui-1.8.11.js", Url)
    @Html.Partial("_AutocompleteJS")
</body>
</html>